<!-- 今日加速域名排名 -->
<template>
  <div class="wrap">
    <span class="title">top <span>10</span> 今日加速域名排名</span>
    <!-- <div ref="linechart" id="chart2" :style="{height:height,width:width}"/> -->
    <el-table stripe :data="dataList" style="width: 100%; margin: 15px 0">
      <el-table-column label="序号" width="50" type="index"></el-table-column>
      <el-table-column label="域名" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.URL }}
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="Name" width="100"></el-table-column>
      <el-table-column label="加速次数" width="80">
        <template slot-scope="scope">
          {{ scope.row.Count }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
import { getNowDay } from "@/utils/index.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      width: "100%",
      height: "315px",
      chartData: [],
      dataList: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$refs.linechart)
      // this.setOptions()
    },
    async getData() {
      let URL = [];
      let num = [];
      let NowDay = getNowDay("time");
      const data = {
        Filter: {
          StartTime: NowDay,
          EndTime: "",
          AccessType: 2,
          SumCount: 10
        }
      };
      const res = await connrequest("GetShadowURLSumGroupByURL", data);

      if (res.Data) {
        res.Data.map((item) => {
          // item.Count = item.Count.toLocaleString()
          URL.push(item.URL);
          num.push(item.Count);
        });
        this.dataList = res.Data;
        // this.setOptions({URL,num})
      }
      // else{
      //   const dom = document.getElementById('chart2');
      //   dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
      //   dom.removeAttribute('_echarts_instance_');
      // }
    },
    setOptions({ URL, num } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: [0, 0.01],
          data: URL //倒叙排列
          // show: false
          // axisLabel: {
          //   formatter: function (value) {
          //     return value.split("").join("\n");
          //   },
          // }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "加速次数",
            type: "bar",
            data: num //倒叙排列
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang="scss">
.wrap {
  height: calc(50vh - 50px) !important;
  overflow: hidden;
  .el-table {
    border-bottom: none;
  }
}
</style>
